<template>
    <div class="personal_layout">
        <div class="headerTop bg-[#1878F1] pt-[20px] relative">
            <h3 class="text-center text-[30px] text-[#FFF] font-normal">患者基本信息</h3>
            <ul class="flex justify-around mt-[80px]">
                <li v-for="(item, index) in list" :key="index" class="w-4/12 last-of-type:border-none">
                    <p class="w-full text-center text-[28px] text-[#FFF]">{{ item.name }}</p>
                    <p class="w-full text-center  text-[32px] text-[#FFF] pt-[14px]">{{ item.value }}</p>
                </li>
            </ul>
            <div class="absolute rounded-l-full pl-[28px] right-0 top-[10px] bg-blue-400 text-[#1878F1] text-[28px] w-[210px] py-[14px]">15523658945</div>
            <div class="phoneClass  mt-[64px] px-[28px] ">
                <div class="py-[30px]">
                    <span>注册日期：2021-05-26</span>
                </div>
                <div class="py-[30px] flex justify-between">
                    <span>联系电话：0534-56987456</span>
                    <span>德州市卫生健康委员会</span>
                </div>
            </div>
        </div>
        <div class="bottom_layout px-[30px] pt-[36px]">
            <div class="titles flex items-center mb-[40px]">
                <div class="bg-[#1878F1]  w-[10px] h-[32px] rounded-lg"></div>
                <p class="text-[32px] ml-[20px]">待处理事项</p>
            </div>
            <Cell  is-link @click="routerPath('list',{message:'personal'})">
                <template #title>
                    <div class="flex items-center">
                        <img src="@img/p_2.png" alt="" class="w-[32px] h-[32px] mr-[10px]">
                        <span class="custom-title">单元格</span>
                        <p class="bg-[#FF0000]  ml-[20px] w-[40px] h-[30px] flex items-center justify-center rounded-lg text-[24px] text-[#FFF]">2</p>
                    </div>
                </template>
            </Cell>
        </div>
    </div>
</template>
<script setup>
import { Cell } from 'vant';
import { routerPath } from '../router';
let list = [
    { name: '姓名', value: '文天祥' },
    { name: '性别', value: '男' },
    { name: '科室', value: '妇幼保健科' },
]
</script>
<style scoped lang="scss">
.personal_layout {
    .headerTop {
        li {
            border-right: 1px solid #FFFFFFFF;

            &:last-of-type {
                border: none;
            }
        }

        .phoneClass {
            background: rgba(205, 220, 251, 0.4);
            font-size: 28px;
            color: #FFF;

            >div {
                border-bottom: 1px solid rgba(250, 250, 250, .5);
            }
        }
    }

    .bottom_layout {
        :deep(.van-cell){
            padding : 0;
        }
    }
}
</style>